<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no"/>
    <title>ITDragon系统</title>

    <script src="asserts/js/jquery-3.2.1.slim.min.js"></script>
    <script th:inline="javascript">

    function test() {
        alert(1);

    }

    </script>
    <style>

        div {
            position: relative;
            line-height: 30px;
        }

        input[type="radio"] {
            width: 20px;
            height: 20px;
            opacity: 0;
        }

        label {
            position: absolute;
            left: 5px;
            top: 3px;
            width: 20px;
            height: 20px;
            border-radius: 20%;
            border: 1px solid #999;

        }

        /*设置选中的input的样式*/
        /* + 是兄弟选择器,获取选中后的label元素*/
        input:checked+label {
            background-color: #fe6d36;
            border: 1px solid #fe6d32;
        }
        /*添加的加号与label进行拼接(一个矩形边框去掉上和左的边框),再旋转45度*/
        input:checked+label::after {
            position: absolute;
            content: "";
            width: 5px;
            height: 10px;
            top: 3px;
            left: 6px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: rotate(45deg);
    </style>


</head>

<body>

<div>
    <input  onclick="test()" id="item1" type="radio"  name="item" value="选项一" checked >
    <label for="item1"></label>
    <span>选项一</span>
</div>
<div>
    <input id="item2" type="radio" name="item" value="选项二">
    <label for="item2"></label>
    <span>选项二</span>
</div>

</body>



</html>